<template>
  <span class="base-btn" :class="{ active }" @click="$emit('click')">
    <slot></slot>
  </span>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.base-btn {
  color: #fff;
  font-size: .781vw;
  line-height: 1.7;
  padding: 1px .8em 0 .9em;
  min-width: calc(2.5em + .8em + .9em);
  text-align: center;
  background-size: 100% 100%;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
}

.base-btn.active {
  background-image: url('../assets/按钮.png');
  color: #4ee9eb;
}
</style>
